<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转相册</title>
    <style type="text/css">
        body,
        div,
        p,
        ul,
        ol,
        li,
        dl,
        dt,
        dd,
        table,
        tr,
        td,
        form,
        hr,
        fieldset,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        img,
        input {
            margin: 0;
            padding: 0;
        }

        body {
            background: black;
        }

        .content {
            width: 200px;
            height: 150px;
            position: relative;
            margin: 200px auto 0;
            perspective: 1500px;
        }

        .box {
            width: 200px;
            height: 150px;
            transform-style: preserve-3d;
            transform: rotateX(-30deg);
            animation: photo 15s linear infinite;
        }

        .box:hover {
            animation: photo 15s linear infinite paused;
        }

        .box img {
            width: 200px;
            height: 150px;
            position: absolute;
            left: 0;
            top: 0;
            transform-style: preserve-3d;
            transition: all 1s;
        }

        .box img:nth-child(1) {
            transform: translateZ(280px);
        }

        .box img:nth-child(2) {
            transform: rotateY(40deg) translateZ(280px);
        }

        .box img:nth-child(3) {
            transform: rotateY(80deg) translateZ(280px);
        }

        .box img:nth-child(4) {
            transform: rotateY(120deg) translateZ(280px);
        }

        .box img:nth-child(5) {
            transform: rotateY(160deg) translateZ(280px);
        }

        .box img:nth-child(6) {
            transform: rotateY(200deg) translateZ(280px);
        }

        .box img:nth-child(7) {
            transform: rotateY(240deg) translateZ(280px);
        }

        .box img:nth-child(8) {
            transform: rotateY(280deg) translateZ(280px);
        }

        .box img:nth-child(9) {
            transform: rotateY(320deg) translateZ(280px);
        }

        .box img:nth-child(1):hover {
            transform: translateZ(280px) scale(1.2);
        }

        .box img:nth-child(2):hover {
            transform: rotateY(40deg) translateZ(280px) scale(1.2);
        }

        .box img:nth-child(3):hover {
            transform: rotateY(80deg) translateZ(280px) scale(1.2);
        }

        .box img:nth-child(4):hover {
            transform: rotateY(120deg) translateZ(280px) scale(1.2);
        }

        .box img:nth-child(5):hover {
            transform: rotateY(160deg) translateZ(280px) scale(1.2);
        }

        .box img:nth-child(6):hover {
            transform: rotateY(200deg) translateZ(280px) scale(1.2);
        }

        .box img:nth-child(7):hover {
            transform: rotateY(240deg) translateZ(280px) scale(1.2);
        }

        .box img:nth-child(8):hover {
            transform: rotateY(280deg) translateZ(280px) scale(1.2);
        }

        .box img:nth-child(9):hover {
            transform: rotateY(320deg) translateZ(280px) scale(1.2);
        }

        @keyframes photo {
            0% {
                transform: rotateX(-30deg) rotateY(0deg);
            }

            100% {
                transform: rotateX(-30deg) rotateY(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="box">
            <img src="images/1.jpg" alt="" />
            <img src="images/2.jpg" alt="" />
            <img src="images/3.jpeg" alt="" />
            <img src="images/1.jpg" alt="" />
            <img src="images/2.jpg" alt="" />
            <img src="images/3.jpeg" alt="" />
            <img src="images/1.jpg" alt="" />
            <img src="images/2.jpg" alt="" />
            <img src="images/3.jpeg" alt="" />
        </div>
    </div>
</body>

</html>